<template>
  <view>
    <view
        :style="{marginTop:menuButton.top+'px',height:menuButton.height+'px',lineHeight:menuButton.height+'px',paddingLeft:'30rpx',fontSize:'30rpx'}">
      好物商城
    </view>
    <view class="p30">
      <view class="tabList">
        <view class="tab-item" :class="{active:tabIndex==index}" v-for="(item,index) in ticket_type_list"
              @click="tabClickup(item,index)">
          {{ item.title }}
        </view>
      </view>
      <view class="goodsList">
        <view class="goods-item" v-for="item in data_list" 	@click="go('/pagesA/index_menu/tickets_detailf1?id='+item.id)">
          <image :src=item.image />
          <view class="title">{{item.title}}</view>
          <view class="buy">
            <view class="money">¥{{item.price}}</view>
            <view class="buyButton">
				<!-- @click="toDetail(item)" -->
              <u-button size="mini" color="black" customStyle="fontSize:24rpx" >详情</u-button>
            </view>
          </view>
        </view>
      </view>
    </view>
    <TabBar :tabIndex="3"/>
  </view>
</template>

<script>
import TabBar from "../../components/TabBar.vue";
import { ticket_type, ticket_list } from '@/api/index_menu/index.js'

export default {
  components: {TabBar},
  data() {
    return {
      menuButton: {},

      tabList: ['新疆好物', '内蒙曾黎', '青甘礼遇'],
      tabIndex: 0,
	  
	  menuButtonInfo: 0,
	  				ticket_type_list: [],
	  				// 请求参数
	  				query: {
	  					sort: 1,
	  					page: 1,
	  					search: '',
	  					type_id: ''
	  				},
	  				keyname: '',
	  				// 列表
	  				data_list: [],
	  				status: 'loadmore',
	  				loadingText: '正在加载中',
	  				loadmoreText: '点击或上拉加载更多~',
	  				nomoreText: '没有更多啦~',
					
					
    }
  },
  onLoad(e) {
    this.menuButton = uni.getMenuButtonBoundingClientRect()

// #ifdef MP-WEIXIN
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect().top
			// #endif
			if (e.key) {
				this.keyname = e.key
				this.query.search = e.key
				// this.$forceUpdate()
			}
			this.get_ticket_type()
			this.get_ticket_list()

  },
  onReachBottom() {
  			if (this.status != 'nomore') {
  				this.get_ticket_list()
  			}
  		},
		
  methods: {
    toDetail(item){
      uni.navigateTo({
        url: '/pagesA/index_menu/guide_order_detail?id=' + 69
      })
    },
    tabClick(item, index) {
      this.tabIndex = index;
    },
	go(url) {
					uni.navigateTo({
						url
					})
				},
				back() {
					uni.navigateBack({
						delta: 1
					})
				},
				// 获取门票类型
				get_ticket_type() {
					ticket_type().then(res => {
						// console.log(res)
						if (res.code == 1) {
							let arr = []
							res.data.forEach(item => {
								item.action = false
								arr.push(item)
							})
							this.ticket_type_list = arr
						}
					})
				},
				tabClickup(aa,index) {
					console.log(index,this.ticket_type_list)
					// this.ticket_type_list[index].action = !this.ticket_type_list[index].action
					// this.$forceUpdate()
					this.tabIndex = index;
					this.query.type_id = this.ticket_type_list[index].id;
					// this.get_ticket_list();
					this.query_data(this.query)
				},
				
				
		// 请求门票列表
				query_data(obj) {
					// 每次筛选清空page
					this.query.page = 1
					this.data_list = []
					this.query = { ...this.query, ...obj }
					// console.log(this.query)
					this.get_ticket_list()
				},
				// 获取门票列表
				get_ticket_list() {
					this.status = 'loading'
					ticket_list(this.query).then(res => {
						console.log(res)
						if (res.code == 1) {
							if (res.data.data.length > 0) {
								this.data_list = [...this.data_list, ...res.data.data]
								this.query.page += 1
								this.status = 'loadmore'
							} else {
								this.status = 'nomore'
							}
						}
					})
				}
				
  }
}
</script>

<style lang="scss">
page {
  padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
  background-color: #f5f5f5;
}

.p30 {
  padding: 30rpx;
}

.tabList {
  display: flex;
  align-items: center;

  .tab-item {

    margin-right: 20rpx;
    padding: 10rpx 20rpx;
    border-radius: 10rpx;
    color: gray;
  }

  .active {
    color: white;
    background-color: #65A285;
  }
}

.goodsList {
  margin-top: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;

  .goods-item {
    background-color: white;
    width: 330rpx;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;

    image {
      width: 200rpx;
      height: 200rpx;
      display: block;
      margin: auto;
    }

    .title {
      margin-top: 20rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;  /* 控制显示的行数 */
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .buy{
      margin-top: 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .money{
        color: darkred;
      }
    }
  }
}
</style>
